<template>
	<div>
		<el-row :gutter="10">
			
			<el-col :span="6">
				
				<el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add()">添加</el-button>
			</el-col>
		</el-row>
		<el-tabs type="border-card">
			<el-tab-pane label="星期一">
				<div class="breakfast">
					<div class="a1">早餐</div>
					<el-row :gutter="1">
						<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
						<el-col :span="3.5"   v-for="item in tableData" :key="item.id" :offset="1">
							<div style="margin-top:1px">
								<el-card :body-style="{ padding: '0px' }" shadow="hover">
									<img :src="getImgUrl(item.foodpic)" class="image" />
	
									<div class="a11">
										<span>类别：{{item.foodType}}</span>
										<br />
										<span>名称：{{item.foodName}}</span>
										<br />
										<span>价钱：{{item.foodPrice}}元</span>
										<br />
										<span>是否清真：{{item.isMuslim}}</span>
										<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
										
									</div>
								</el-card>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="lunch"><div class="a1">午餐</div>
				<el-row :gutter="1">
					<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
					<el-col :span="3.5"   v-for="item in tableData2" :key="item.id" :offset="1">
						<div style="margin-top:1px">
							<el-card :body-style="{ padding: '0px' }" shadow="hover">
								<img :src="getImgUrl(item.foodpic)" class="image" />
					
								<div class="a11">
									<span>类别：{{item.foodType}}</span>
									<br />
									<span>名称：{{item.foodName}}</span>
									<br />
									<span>价钱：{{item.foodPrice}}元</span>
									<br />
									<span>是否清真：{{item.isMuslim}}</span>
									<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
									
								</div>
							</el-card>
						</div>
					</el-col>
				</el-row>
				</div>
				<div class="dinner"><div class="a1">晚餐</div>
				<el-row :gutter="1">
					<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
					<el-col :span="3.5"   v-for="item in tableData3" :key="item.id" :offset="1">
						<div style="margin-top:1px">
							<el-card :body-style="{ padding: '0px' }" shadow="hover">
								<img :src="getImgUrl(item.foodpic)" class="image" />
					
								<div class="a11">
									<span>类别：{{item.foodType}}</span>
									<br />
									<span>名称：{{item.foodName}}</span>
									<br />
									<span>价钱：{{item.foodPrice}}元</span>
									<br />
									<span>是否清真：{{item.isMuslim}}</span>
									<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
									
								</div>
							</el-card>
						</div>
					</el-col>
				</el-row></div>
			</el-tab-pane>
			<el-tab-pane label="星期二">
				<div class="breakfast">
						<div class="a1">早餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData11" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
					
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row>
					</div>
					<div class="lunch"><div class="a1">午餐</div>
					<el-row :gutter="1">
						<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
						<el-col :span="3.5"   v-for="item in tableData22" :key="item.id" :offset="1">
							<div style="margin-top:1px">
								<el-card :body-style="{ padding: '0px' }" shadow="hover">
									<img :src="getImgUrl(item.foodpic)" class="image" />
						
									<div class="a11">
										<span>类别：{{item.foodType}}</span>
										<br />
										<span>名称：{{item.foodName}}</span>
										<br />
										<span>价钱：{{item.foodPrice}}元</span>
										<br />
										<span>是否清真：{{item.isMuslim}}</span>
										<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
										
									</div>
								</el-card>
							</div>
						</el-col>
					</el-row>
					</div>
					<div class="dinner"><div class="a1">晚餐</div>
					<el-row :gutter="1">
						<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
						<el-col :span="3.5"   v-for="item in tableData33" :key="item.id" :offset="1">
							<div style="margin-top:1px">
								<el-card :body-style="{ padding: '0px' }" shadow="hover">
									<img :src="getImgUrl(item.foodpic)" class="image" />
						
									<div class="a11">
										<span>类别：{{item.foodType}}</span>
										<br />
										<span>名称：{{item.foodName}}</span>
										<br />
										<span>价钱：{{item.foodPrice}}元</span>
										<br />
										<span>是否清真：{{item.isMuslim}}</span>
										<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
										
									</div>
								</el-card>
							</div>
						</el-col>
					</el-row></div>
				
			</el-tab-pane>
			<el-tab-pane label="星期三">
				<div class="breakfast">
							<div class="a1">早餐</div>
							<el-row :gutter="1">
								<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
								<el-col :span="3.5"   v-for="item in tableData111" :key="item.id" :offset="1">
									<div style="margin-top:1px">
										<el-card :body-style="{ padding: '0px' }" shadow="hover">
											<img :src="getImgUrl(item.foodpic)" class="image" />
						
											<div class="a11">
												<span>类别：{{item.foodType}}</span>
												<br />
												<span>名称：{{item.foodName}}</span>
												<br />
												<span>价钱：{{item.foodPrice}}元</span>
												<br />
												<span>是否清真：{{item.isMuslim}}</span>
												<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
												
											</div>
										</el-card>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="lunch"><div class="a1">午餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData222" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row>
						</div>
						<div class="dinner"><div class="a1">晚餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData333" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row></div>
					
				</el-tab-pane>
				
			</el-tab-pane>
			<el-tab-pane label="星期四">
				<div class="breakfast">
							<div class="a1">早餐</div>
							<el-row :gutter="1">
								<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
								<el-col :span="3.5"   v-for="item in tableData1111" :key="item.id" :offset="1">
									<div style="margin-top:1px">
										<el-card :body-style="{ padding: '0px' }" shadow="hover">
											<img :src="getImgUrl(item.foodpic)" class="image" />
						
											<div class="a11">
												<span>类别：{{item.foodType}}</span>
												<br />
												<span>名称：{{item.foodName}}</span>
												<br />
												<span>价钱：{{item.foodPrice}}元</span>
												<br />
												<span>是否清真：{{item.isMuslim}}</span>
												<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
												
											</div>
										</el-card>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="lunch"><div class="a1">午餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData2222" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row>
						</div>
						<div class="dinner"><div class="a1">晚餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData3333" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row></div>
					
				</el-tab-pane>
				
			</el-tab-pane>
			<el-tab-pane label="星期五">
				<div class="breakfast">
							<div class="a1">早餐</div>
							<el-row :gutter="1">
								<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
								<el-col :span="3.5"   v-for="item in tableData11111" :key="item.id" :offset="1">
									<div style="margin-top:1px">
										<el-card :body-style="{ padding: '0px' }" shadow="hover">
											<img :src="getImgUrl(item.foodpic)" class="image" />
						
											<div class="a11">
												<span>类别：{{item.foodType}}</span>
												<br />
												<span>名称：{{item.foodName}}</span>
												<br />
												<span>价钱：{{item.foodPrice}}元</span>
												<br />
												<span>是否清真：{{item.isMuslim}}</span>
												<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
												
											</div>
										</el-card>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="lunch"><div class="a1">午餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData22222" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row>
						</div>
						<div class="dinner"><div class="a1">晚餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData33333" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row></div>
					
				</el-tab-pane>
				
			</el-tab-pane>
			<el-tab-pane label="星期六">
				<div class="breakfast">
							<div class="a1">早餐</div>
							<el-row :gutter="1">
								<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
								<el-col :span="3.5"   v-for="item in tableData111111" :key="item.id" :offset="1">
									<div style="margin-top:1px">
										<el-card :body-style="{ padding: '0px' }" shadow="hover">
											<img :src="getImgUrl(item.foodpic)" class="image" />
						
											<div class="a11">
												<span>类别：{{item.foodType}}</span>
												<br />
												<span>名称：{{item.foodName}}</span>
												<br />
												<span>价钱：{{item.foodPrice}}元</span>
												<br />
												<span>是否清真：{{item.isMuslim}}</span>
												<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
												
											</div>
										</el-card>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="lunch"><div class="a1">午餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData222222" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row>
						</div>
						<div class="dinner"><div class="a1">晚餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData333333" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row></div>
					
				</el-tab-pane>
				
			</el-tab-pane>
			<el-tab-pane label="星期日">
				<div class="breakfast">
							<div class="a1">早餐</div>
							<el-row :gutter="1">
								<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
								<el-col :span="3.5"   v-for="item in tableData1111111" :key="item.id" :offset="1">
									<div style="margin-top:1px">
										<el-card :body-style="{ padding: '0px' }" shadow="hover">
											<img :src="getImgUrl(item.foodpic)" class="image" />
						
											<div class="a11">
												<span>类别：{{item.foodType}}</span>
												<br />
												<span>名称：{{item.foodName}}</span>
												<br />
												<span>价钱：{{item.foodPrice}}元</span>
												<br />
												<span>是否清真：{{item.isMuslim}}</span>
												<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
												
											</div>
										</el-card>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="lunch"><div class="a1">午餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData2222222" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row>
						</div>
						<div class="dinner"><div class="a1">晚餐</div>
						<el-row :gutter="1">
							<!-- v-for="item in tabledata" :key="item.classId" :offset="1" -->
							<el-col :span="3.5"   v-for="item in tableData3333333" :key="item.id" :offset="1">
								<div style="margin-top:1px">
									<el-card :body-style="{ padding: '0px' }" shadow="hover">
										<img :src="getImgUrl(item.foodpic)" class="image" />
							
										<div class="a11">
											<span>类别：{{item.foodType}}</span>
											<br />
											<span>名称：{{item.foodName}}</span>
											<br />
											<span>价钱：{{item.foodPrice}}元</span>
											<br />
											<span>是否清真：{{item.isMuslim}}</span>
											<i class="el-icon-edit" style="float: right;" @click="handleEdit(item.id)"></i>
											
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row></div>
					
				</el-tab-pane>
				
			</el-tab-pane>

			

			<el-dialog :title="title" :visible.sync="show"><calendarAdd :show.sync="show" @getData="getData" :editid="editid" :key="showNum"></calendarAdd></el-dialog>
		</el-tabs>
	</div>
</template>
<script>
import axios from '@/utils/axiosutils.js';
import calendarAdd from './calendar_add.vue';
export default {
	data() {
		return {
			tableData: [],
			tableData11: [],
			tableData111: [],
			tableData1111: [],
			tableData11111: [],
			tableData111111: [],
			tableData1111111: [],
			tableData2: [],
			tableData22: [],
			tableData222: [],
			tableData2222: [],
			tableData22222: [],
			tableData222222: [],
			tableData2222222: [],
			tableData3: [],
			tableData33: [],
			tableData333: [],
			tableData3333: [],
			tableData33333: [],
			tableData333333: [],
			tableData3333333: [],
			search: {
				foodName: ''
			},
			query: {
				foodName: '',
				current: 1,
				size: 10
			},
			showNum: 0,
			show: false,
			editid: null,
			title: ''
		};
	},
	components: {
		calendarAdd
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			axios.get(
				'/food/breakfast',
				resp => {
					this.tableData = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/breakfast2',
				resp => {
					this.tableData11 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/breakfast3',
				resp => {
					this.tableData111 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/breakfast4',
				resp => {
					this.tableData1111 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/breakfast5',
				resp => {
					this.tableData11111 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/breakfast6',
				resp => {
					this.tableData111111 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/breakfast7',
				resp => {
					this.tableData1111111 = resp.obj;
				},
				this.query
			);
			
			
			
			
			
			
			
			
			
			
			axios.get(
				'/food/lunch',
				resp => {
					this.tableData2 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/lunch2',
				resp => {
					this.tableData22 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/lunch3',
				resp => {
					this.tableData222 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/lunch4',
				resp => {
					this.tableData2222 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/lunch5',
				resp => {
					this.tableData22222 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/lunch6',
				resp => {
					this.tableData222222 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/lunch7',
				resp => {
					this.tableData2222222 = resp.obj;
				},
				this.query
			);
			
			
			
			
			axios.get(
				'/food/dinner',
				resp => {
					console.log(resp)
					this.tableData3 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/dinner2',
				resp => {
					this.tableData33 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/dinner3',
				resp => {
					this.tableData333 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/dinner4',
				resp => {
					this.tableData3333 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/dinner5',
				resp => {
					this.tableData33333 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/dinner6',
				resp => {
					this.tableData333333 = resp.obj;
				},
				this.query
			);
			axios.get(
				'/food/dinner7',
				resp => {
					console.log(222)
					this.tableData3333333 = resp.obj;
				},
				this.query
			);
		},
		add() {
			this.showNum++;
			this.title = '添加膳食';
			this.editid = null;
			this.show = true;
		},
		handleEdit(id) {
			this.showNum++;
			this.title = '修改膳食';
			this.editid = id;
			this.show = true;
		},
		handleDelete(id) {
			axios.del(
				'/food/del',
				response => {
					this.getData();
				},
				{
					id: id
				}
			);
		},
		//获取图片地址
		getImgUrl(icon){
		   return require('@/images/'+icon+'.jpg');
		},
	}
};
</script>

<style scoped>
	.a1{
		text-align: center;
	}
	.a11 {
			padding-left: 30px;
			text-align: left;
		line-height: 19px;
		}
	.bottom{
		text-align:justify;
	}
	.image{
		padding-left: 30px;
		height:120px;
		display: flex;
		
	}
.el-main {
	background-color: #e9eef3;
	color: #333;
	
}

.breakfast {
	height: 200px;
	border: #336633 solid 1px;
	margin: 10px;
}

.a1 {
	/* border: blueviolet solid 1px; */
	height: 200px;
	width: 100px;
	background-color: #669933;
	font-size: 20px;
	writing-mode: vertical-lr;
	/* text-align: center; */
	line-height: 100px;
	color: white;
	float: left;
}

.lunch {
	height: 200px;
	border: #336633 solid 1px;
	margin: 10px;
}

.dinner {
	height: 200px;
	border: #336633 solid 1px;
	margin: 10px;
}
</style>
